import React, { useEffect, useState } from 'react';
import MyTitle from '../../../component/System settings/MyTitle'
import MySearch from '../../../component/System settings/MySearch'
import MyTabble from '../../../component/System settings/MyTabble'
import MyFormbox from '../../../component/System settings/MyFormbox'
import { Space, Button, Modal } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Switch } from 'antd';
import { FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { manager_delete, manager_list, manager_search, manager_change } from '../../../utils/System settings/api'
import { useNavigate } from 'react-router-dom';
import { connect } from 'react-redux'
import { create_managerlist_action, create_managerdelete_action, create_managersearch_action, create_manageredit_action } from '../../../store/System settings/systemActionCreate/index'

interface Props {
    get: any
    managerList: any
    delete: any
    search: any
    edit: any
}

interface DataType {
    key: string;
    user: string;
    role: string;
    phone: number;
    name: string;
    switch: boolean;
}

function Systemsettingsadministrator(props: Props) {
    let navigate = useNavigate()
    let [record, setRecord] = useState({})
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 定义管理列表数据
    useEffect(() => {
        // 发请求
        manager_list().then((res) => {
            console.log(res.data);
            // 调用store同步方法更新数据
            props.get(res.data)
        })

    }, [])


    // 保存rowkey的值
    let [rowkey, setRowkey] = useState([])

    // 定义有几列
    const columns: ColumnsType<DataType> = [
        {
            title: '用户名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '账号',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '是否启用',
            key: 'switch',
            dataIndex: 'switch',
            render: () => (
                <>
                    <Switch defaultChecked onChange={onChange} />
                </>
            ),
        },
        {
            title: '添加时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => showModal(record)}><FormOutlined /></a>
                    <a onClick={() => handle_oneDelete(record)}><DeleteOutlined /></a>
                </Space>
            ),
        },
    ];
    // 定义是否选中
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    // 定义搜索方法
    let handleSearch = (searchText: any) => {
        console.log('搜索了', searchText)
        manager_search('王升文').then((res) => {
            console.log('搜索请求结果', res.data)
            // 调用同步方法
            props.search(searchText)
        })
    }
    // 定义批量删除方法
    let handleDelete = () => {
        console.log('批量删除了')
        // 发请求
        if (rowkey) {
            rowkey.map((element) => {
                let it = props.managerList.find((item: any) => {
                    return item.key == element
                })

                manager_delete(it.id).then((res) => {
                    console.log('批量删除', res.data)
                    // 调用store同步方法更新数据
                    props.delete(it.id)
                })
            })
            setRowkey([])

        }

    }
    // 定义单个删除方法
    let handle_oneDelete = (record: any) => {
        console.log('单个删除了', record)
        // 发请求
        manager_delete(record.id).then((res) => {
            // 调用store同步方法更新数据
            props.delete(record.id)
        })

    }
    // 定义新增方法
    let handleAdd = () => {
        console.log('新增了')
        navigate('/index/systemsettings/addadmin')

    }
    // 拿到选择框数据
    let selectrowKey = (rowkey: any) => {
        console.log('父组件拿到子组件的key了', rowkey)
        // 保存已选数据
        setRowkey(rowkey)
    }
    // 定义弹出框
    const showModal = (record: any) => {
        console.log('showModal出发了')
        setIsModalOpen(true);
        // 保存record值
        setRecord(record)
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };


    // 保存
    const onFinish = (values: any) => {
        console.log("values", values)
        let it = props.managerList.find((item: any) => {
            return item.name == values.name
        })
        if (it) {
            // 发更新请求
            console.log("values.id", values.id)
            manager_change(it.id, values).then((res) => {
                console.log(res.data)
                props.edit(res.data)
            })
        }
    };

    // 
    return (
        <div>
            <MyTitle title={'管理员管理'}>
                {/*给子组件传入这两个按钮 */}
                <Button disabled={rowkey.length == 0} onClick={handleDelete}>删除</Button>
                <Button type="primary" onClick={handleAdd}>新增管理员</Button>
            </MyTitle>

            {/* <MySearch /> */}
            <MyTabble columns={columns} managerList={props.managerList} selectrowKey={selectrowKey}>
                {/*给子组件传入自定义搜索组件 */}
                <MySearch handleSearch={handleSearch} />
                <Modal footer={null} onCancel={handleCancel} open={isModalOpen} onOk={handleOk}>
                    {/* 传入自定义表单 */}
                    <MyFormbox onFinish={onFinish} fromtitle={'编辑管理员信息'} record={record} />
                </Modal>
            </MyTabble>
        </div>
    );
}

// export default Systemsettingsadministrator;
export default connect(
    (state: any) => {
        return {
            managerList: state.managerList
        }
    },
    (dispatch) => {
        return {
            get: function (payload: any) {
                dispatch(create_managerlist_action(payload))
            },
            delete: function (payload: any) {
                dispatch(create_managerdelete_action(payload))
            },
            search: function (payload: any) {
                dispatch(create_managersearch_action(payload))
            },
            edit: function (payload: any) {
                dispatch(create_manageredit_action(payload))
            }

        }
    }
)(Systemsettingsadministrator)